<template>
  <Card id="attendancePersonnelReport">
    <Form ref="searchForm" :label-width="100" :model="searchForm" inline>
      <!-- <Form-item label="月份：" prop="month">
        <DatePicker @on-change="searchForm.month=$event" placeholder="请选择月份" placement="bottom-end" style="width: 200px"
          type="month" v-model="searchForm.month"></DatePicker>
      </Form-item> -->
      <Form-item label="起始日期：" prop="start_date">
        <DatePicker
          v-model="searchForm.start_date"
          placeholder="请选择日期"
          placement="bottom-start"
          style="width: 150px"
          type="date"
          @on-change="searchForm.start_date=$event"></DatePicker>
      </Form-item>
      <Form-item label="截至日期：" prop="end_date">
        <DatePicker
          v-model="searchForm.end_date"
          placeholder="请选择日期"
          placement="bottom-start"
          style="width: 150px"
          type="date"
          @on-change="searchForm.end_date=$event"></DatePicker>
      </Form-item>
      <Form-item label="车辆线路：" prop="line">
        <Select v-model="searchForm.line" clearable placeholder="选择线路" style="width:150px;">
          <Option value="-1">全部</Option>
          <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
        </Select>
      </Form-item>
      <Form-item label="驾驶员名称：" prop="driver">
        <Input v-model="searchForm.driver" clearable placeholder="支持模糊搜索" style="width: 150px" type="text"/>
      </Form-item>
      <Form-item style="margin-left:-90px;">
        <Button icon="md-search" type="primary" @click="getAttendanceBusList()">搜索</Button>
        <Button @click="handleReset()">重置</Button>
      </Form-item>
    </Form>
    <Button
      :disabled="exportBtnDisable"
      icon="md-cloud-download"
      style="margin-bottom:15px"
      type="primary"
      @click="exportAttendancePersonnelList">导出
    </Button>
    <vxe-table
      :data="tableData"
      :loading="loading"
      border
      height="450"
      highlight-hover-row
      show-overflow
      size="mini">
      <vxe-table-column align="center" type="seq" width="100"></vxe-table-column>
      <vxe-table-column align="center" field="driver" sortable title="姓名"></vxe-table-column>
      <vxe-table-column align="center" field="line" title="线路"></vxe-table-column>
      <vxe-table-column align="right" field="normalTime" title="小计"></vxe-table-column>
      <vxe-table-column align="right" field="overTime" title="加班"></vxe-table-column>
      <vxe-table-column align="right" field="nightOverTime" title="晚上加班"></vxe-table-column>
      <vxe-table-column align="right" field="fixTime" title="修车"></vxe-table-column>
      <vxe-table-column align="right" field="stopTime" title="停运"></vxe-table-column>
      <vxe-table-column align="right" field="checkGas" title="检气瓶"></vxe-table-column>
    </vxe-table>
  </Card>
</template>
<script>
import {attendancePersonnelReportList} from '../../api/attendanceReport'

export default {
  data() {
    return {
      tableData: [],
      exportBtnDisable: true,
      loading: false,
      searchForm: {
        start_date: '',
        end_date: '',
        line: '-1',
        driver: '',
      },
      lines: [],
    }
  },
  created() {
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    getAttendanceBusList() {
      this.loading = true
      this.exportBtnDisable = true
      attendancePersonnelReportList(this.searchForm).then((res) => {
        // console.log(res);
        if (res.data) {
          this.tableData = res.data.lists
          this.searchForm.start_date = res.data.start_date
          this.searchForm.end_date = res.data.end_date
          this.searchForm.line = res.data.line
          this.searchForm.driver = res.data.driver
          this.loading = false
          this.exportBtnDisable = false
        }
      })
    },
    handleReset() {
      this.$refs.searchForm.resetFields()
      this.tableData = []
      this.getAttendanceBusList()
    },
    //导出
    exportAttendancePersonnelList() {
      const start_date = this.searchForm.start_date
      const end_date = this.searchForm.end_date
      const line = this.searchForm.line
      const driver = this.searchForm.driver
      window.location.href =
        '/api/exportAttendancePersonnelList?start_date=' + start_date + '&end_date=' + end_date + '&line=' + line + '&driver=' + driver

    },
  },
}
</script>
<style>
#attendancePersonnelReport .vxe-table,
#attendancePersonnelReport .vxe-toolbar {
  width: 800px;
  margin-right: auto;
  margin-left: 0;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-center-modal .ivu-modal {
  top: 0;
}
</style>
